import React, {Component} from 'react'
import {
    View,
    Image,
    Text,
    Button,
    StyleSheet
} from 'react-native'

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Mine from "../mine/mine";
import * as doLogin from "../../actions/doLogin"

class Login extends Component {

    componentWillReceiveProps(nextProps) {
        const { loginIn } = this.props;
        alert(loginIn.status === nextProps.status)
    }

    shouldComponentUpdate(nextProps, nextState)
    {
        // 登录完成，且成功登录
        if (nextProps.status === 'done' && nextProps.isSuccess) {
            this.props.navigation.navigate('Mine')
            return false;
        }
        return true;
    }

    render(){

        let tips = '欢迎来到登录页面';
        if (this.props.status === 'init')
        {
            tips = '请点击登录';
        }
        else if (this.props.status === 'doing')
        {
            tips = '正在登录...';
        }
        else if (this.props.status === 'done' && !this.props.isSuccess)
        {
            tips = '登录失败, 请重新登录';
        }

        return(
            <View style={styls.container}>
                <Text style={{height:40, width:150}}> {tips} </Text>

                <Button title={'登录'} style={{height:50, width:250}} onPress={() => doLogin()}/>
            </View>
        )
    }

    // login(){
    //     // alert(this.props.status)
    //     doLogin.loginSuccess(true, null)
    // }
}

function mapStateToProps(state)
{
    const {loginStatus}  = state;
    return {
        loginStatus
    }
}


const mapDispatchToProps = (dispatch) => {
    const readActions = bindActionCreators(doLogin, dispatch);
    return {
        readActions
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const styls = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
    }
})
